<template>
  <div>
    <div v-if="state=='1'" class="course_video_box">
      <!-- 视频播放盒子 -->
      <div>
        <h2 style="text-align: left;">{{ OnevideoName }}</h2>
        <div style="display: flex; margin-top: 3vh;">
          <i class="el-icon-video-play">已播放</i><span>{{ OnevideoPlaybackQuantity }}次</span>
          <i class="el-icon-time">上传时间</i><span>{{ course.courseDate }}</span>
        </div>
        <div style="margin-top: 3vh;">
          <video controls :src="OnevideoData" id="videoTime"></video>
        </div>
        <el-divider></el-divider>
        <div style="width: 50vw;">
      {{course.courseInformation}}
        </div>
      </div>

      <div style=" margin-top:2vh; margin-left: 1vw;">
    
        <!-- 选集盒子 -->
        <div class="page_number">
          <div style="background-color:rgb(225, 228, 228);">视频选集<i class="el-icon-s-unfold"></i></div>
          <div>
            <div class="tables" v-for="(itme,i) in tableData" :key="i" @click="Switch(i)">
              <span style="width: 6vw;">p{{ itme.id}}</span>
              <span style="width: 65vw;">{{ itme.coursename }}</span>
              <span style="width: 11vw;">{{ itme.courseduration}}</span>
            </div>
          </div>
        </div>
      </div>


    </div>
    <div v-if="state=='0'">
      <el-empty description="暂无内容，等待老师上传"></el-empty>
    </div>
    <br>
    <div></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      state: '0',
      videoID: 0,
      OnevideoName: '',
      OnevideoData: '',
      Onevideodate: '',
      OnevideoPlaybackQuantity: '2231',
      tableData: [],
      course:[]
    }
  },
  mounted() {
    var that=this
    var courseID=that.$store.state.CourseId
    var courseMerber=that.$store.state.CourseMerber
    var loginStart=JSON.parse(sessionStorage.getItem("Loginstate"))
    var user_info=JSON.parse(sessionStorage.getItem("user_info"))
    if(courseMerber==1){
      if(loginStart==1){
        if(user_info.member==1){
          this.Axios(courseID) 
        }else{
        this.$alert('您当前还不是会员，无法访问该课程，请开通会员后在尝试！', '提示', {
          confirmButtonText: '确定',
          showClose:false,
          callback: action => {
            that.$router.replace('/index/Course')
            this.$message({
              type: 'info',
              message: `请开通会员后重试`
            });
          } 
        })
      }
      }else{
        this.$alert('您当前还未登录，无法访问该课程，请登录后在尝试！', '提示', {
          confirmButtonText: '确定',
          showClose:false,
          callback: action => {
            that.$router.replace('/index/Course')
            this.$message({
              type: 'info',
              message: `请登录后重试`
            });
          } 
        })
      }
    }else{
      that.Axios(courseID)
    }
       
    
  },
  methods: {
    //选集切换
    Switch(i) {
      this.OnevideoName = this.tableData[i].coursename,
          this.OnevideoData = this.tableData[i].courseurl,
          this.Onevideodate = this.tableData[i].videodate,
          this.OnevideoPlaybackQuantity = this.tableData[i].videoPlaybackQuantity
    },
    //获取播放时间
    videoTime() {
      var myVideo = document.getElementById('videoTime')
      myVideo.addEventListener('pause', function () {
        var minute = Math.floor(myVideo.currentTime / 60) + ':' + Math.floor(myVideo.currentTime) % 60
        console.log("播放暂停", '播放时长为：' + minute);
      });
    },
   Axios(courseid){

    var that=this
    axios({
        method: 'get',
        url: 'api/CourseDetails',
        params: {
          CourseId:courseid
        }
    }).then(function(res){
      console.log(res.data)
        if(res.data!=''){
          that.state='1'
        that.tableData=res.data
        that.OnevideoData=res.data[0].courseurl
        that.OnevideoName=res.data[0].coursename
        }else{
          that.state='0'
        }        
    })
    axios({
        method: 'get',
        url: 'api/Course',
    }).then(function(res){
        that.course=res.data[courseid-1]
     
    })
   } 
  }
}
</script>

<style>
.course_video_box {

  padding: 3vh 0 0 15vw;
  display: flex;
}

i {
  font-size: 13px;
}

span {
  font-size: 13px;
  padding: 0 0.4vw 0 0.4vw;
}

video {
  width: 50vw;
}

.head_sculpture {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.tables {
  width: 100%;
  height: 5vh;
  background-color: rgb(225, 228, 228);
  padding: 1vh;
  display: flex;
  padding: 10px;
  transition: background-color 0.5s ease;
  border-bottom: 1px;
  border-bottom: thin solid rgb(173, 173, 176);
}

.tables:hover {
  background-color: rgb(172, 178, 178);
}

span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page_number {
  width: 22vw;
  height: 60vh;
  margin-top: 11vh;
  background-color: rgb(225, 228, 228);
  padding: 1.5vh 0.2vw 0 0.5vw;
  border-radius: 6px;
}
</style>